<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>人文学院请假申请系统</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://lib.baomitu.com/axios/0.26.1/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/element-ui/2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://lib.baomitu.com/element-ui/2.15.7/index.js"></script>
    <!-- cos腾讯云对象存储 -->
    <script src="https://zgx949-1251354949.cos.ap-nanjing.myqcloud.com/cos-js-sdk-v5.min.js"></script>
    <style>
        el-card {
            margin: 30px;
        }
    </style>

</head>

<body>

    <div id="main">
        <el-card>
            <h1 style="color: #409EFF;text-align: center;">人文学院请假申请系统</h1>
        </el-card>
        <el-card>
            <el-steps :active="step">
                <el-step title="申请" description="提交请假申请"></el-step>
                <el-step title="审核" description="等待审核"></el-step>
                <el-step title="销假" description="销毁请假"></el-step>
            </el-steps>

        </el-card>

        <el-card v-if="step===0">
            <!-- 请假申请 -->
            <el-form ref="form" :model="classname" label-width="80px">
                <el-form-item label="班级:">
                    <el-input v-model="classname" placeholder="请输入班级" prop="classname"></el-input>
                </el-form-item>
                <el-form-item label="姓名:">
                    <el-input v-model="name" placeholder="请输入姓名" prop="name"></el-input>
                </el-form-item>
                <el-form-item label="手机:">
                    <el-input v-model="phone" placeholder="请输入手机" prop="phone"></el-input>
                </el-form-item>
                <el-form-item label="去向:">
                    <el-input v-model="go_place" placeholder="请输入去向" prop="go_place"></el-input>
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input v-model="description" type="textarea" placeholder="请输入内容" :rows="4" prop="description">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="dialogFormVisible = true">查询申请</el-button>
                    <el-button type="primary" @click="submit()">提交申请</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 弹出查询 -->
        <el-dialog title="请假查询" :visible.sync="dialogFormVisible">
            <el-form :model="phone">
                <el-form-item label="手机号：" :label-width="300">
                    <el-input v-model="phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="()=>{search();step=1}">确 定</el-button>
            </div>
        </el-dialog>

        <el-card v-if="step===1 ">
            <!-- 审核情况 -->
            <div style="display: flex; flex-direction: row-reverse;">
                <el-button type="primary" @click="step=0">重新申请</el-button>
            </div>
            <el-empty v-if="list.length === 0">
                <!-- <el-button type="primary" @click="step=0">重新申请</el-button> -->
            </el-empty>
            <el-card v-for="(i, index) in list" :key="index">
                <el-descriptions class="margin-top" :title="i.create_time" :column="1" :size="100" border>
                    <template slot="extra">
                        <el-button type="primary" size="small" @click="returned(i.id)">销假</el-button>
                    </template>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            班级
                        </template> {{ i.classname }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            姓名
                        </template> {{ i.name }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            手机号
                        </template> {{ i.phone }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            申请描述
                        </template> {{ i.description }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            状态
                        </template>
                        <el-tag v-if="i.status === -1" type="danger">驳回</el-tag>
                        <el-tag v-if="i.status === 0">待处理</el-tag>
                        <el-tag v-if="i.status === 1" type="success">通过</el-tag>
                        <el-tag v-if="i.status === 2" type="info">已销假</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            去处
                        </template> {{ i.go_place }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="i.status === -1">
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            驳回提示
                        </template>
                        <el-tag type="danger">{{ i.rejection }}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>


        </el-card>

        <el-card v-if="step===2 ">
            <!-- 销假结果 -->
            <el-result icon="success" title="销假成功" subTitle="已提交销假申请，返回查看结果">
                <template slot="extra">
                    <el-button type="primary" size="large" @click="()=>{this.search();step=1;}">返回</el-button>
                </template>
            </el-result>
        </el-card>

    </div>

    <script>
        var baseUrl = 'https://ty.lefthand.top'
            // 创建一个新的 Vue 实例
        var demo = new Vue({
            // DOM 元素，挂载视图模型
            el: '#main',

            // 定义属性，并设置初始值
            data: {
                dialogFormVisible: false, // 弹出对话框
                step: 1, // 0申请1审核2消假
                classname: '', //班级名
                name: '', // 姓名
                phone: '', // 手机
                go_place: '', // 去向
                description: '', // 备注
                list: [], // 已经申请的信息
            },
            computed: {},
            // 点击菜单使用的函数
            methods: {
                submit() {
                    if (!this.classname || !this.name || !this.phone || !this.go_place) {
                        this.$message({
                            type: 'error',
                            message: '请填写完整'
                        })
                        return;
                    }
                    // 保存请假
                    window.localStorage.setItem('data', JSON.stringify({
                        classname: this.classname,
                        name: this.name,
                        phone: this.phone,
                        go_place: this.go_place,
                        description: this.description
                    }))


                    axios.get(
                            `${baseUrl}/leave/add_leave/?classname=${this.classname}&name=${this.name}&phone=${this.phone}&go_place=${this.go_place}&description=${this.description}`
                        ).then(res => {
                            if (res.data.code === 1) {
                                this.step = 1; // 跳转到等待审核界面
                                this.search(); // 查询结果
                                console.log(res.data)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.data.msg
                                })
                            }


                        })
                        // alert('提交')
                },
                search() {
                    this.dialogFormVisible = false;
                    axios.get(`${baseUrl}/leave/query/?phone=${this.phone}`).then(res => {
                        if (res.data.length > 0) {
                            // this.step = 1;
                            this.list = res.data;

                        } else {
                            this.$message({
                                type: 'error',
                                message: '暂无数据'
                            })
                        }
                    })
                },
                // 销假
                returned(id) {

                    axios.get(`${baseUrl}/leave/returned/?id=${id}`).then(res => {
                        if (res.data.code === 1) {
                            this.step = 2
                            this.search()

                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.msg
                            })
                        }
                    })
                }
            },
            mounted() {
                let data = JSON.parse(window.localStorage.getItem('data'));
                if (data) {
                    this.classname = data.classname;
                    this.name = data.name;
                    this.phone = data.phone;
                    this.go_place = data.go_place;
                    this.search();
                }

            }

        });
    </script>
</body>

</html>